<template>
	<el-form ref="ruleFormRef" :model="data" status-icon :rules="rules" label-width="0px" class="ruleForm">
		<el-form-item class="animation1" prop="username">
			<el-input v-model="data.username" clearable type="text" maxlength="11" autocomplete="off" :placeholder="$t('system.account')">
				<template #prefix>
					<el-icon size="18">
						<component :is="'User'"></component>
					</el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="animation2" prop="password">
			<el-input
				v-model="data.password"
				clearable
				show-password
				maxlength="12"
				type="password"
				autocomplete="off"
				:placeholder="$t('system.password')"
			>
				<template #prefix>
					<el-icon size="18">
						<component :is="'Lock'"></component>
					</el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="animation3" prop="password2">
			<el-input
				v-model="data.password2"
				clearable
				show-password
				maxlength="12"
				type="password"
				autocomplete="off"
				:placeholder="$t('system.passwords')"
			>
				<template #prefix>
					<el-icon size="18">
						<component :is="'Lock'"></component>
					</el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="animation4">
			<el-checkbox v-model="data.select">{{ $t('system.remember') }}</el-checkbox>
		</el-form-item>
		<el-form-item class="animation5">
			<el-button type="primary" @click="submit(ruleFormRef)">{{ $t('system.register') }}</el-button>
		</el-form-item>
		<el-form-item class="animation6">
			<el-button type="default" @click="change('user')">{{ $t('system.back') }}</el-button>
		</el-form-item>
	</el-form>
</template>
<script setup lang="ts">
import { Login } from '@/types/data';
import type { FormInstance, FormRules } from 'element-plus';
import { verifyUser, verifyPass } from './verify';
const ruleFormRef = ref<FormInstance>();
const data: Login = reactive({
	username: '',
	password: '',
	password2: '',
	select: false,
});
/**
 * @description: 验证密码
 * @param {any} _rule
 * @param {any} value
 * @param {any} callback
 */
const verifyPass2 = (_rule: any, value: any, callback: any) => {
	if (value === '') {
		callback(new Error('请再次输入6-12位密码'));
	} else {
		if (value == data.password) {
			return callback();
		}
		callback(new Error('两次密码不一致'));
	}
};
const rules = reactive<FormRules<typeof data>>({
	username: [{ validator: verifyUser, trigger: 'blur' }],
	password: [{ validator: verifyPass, trigger: 'blur' }],
	password2: [{ validator: verifyPass2, trigger: 'blur' }],
});
const emit = defineEmits(['change']);
/**
 * @description: 切换登录方式
 * @param {string} value
 */
const change = (value: string) => {
	emit('change', value);
};
/**
 * @description: 登录
 * @param {FormInstance} formEl
 * @return {*}
 */
const submit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid) => {
		if (valid) {
			console.log('submit!');
		} else {
			console.log('error submit!');
		}
	});
};
</script>
<style lang="scss" scoped>
@import '@/styles/transition.scss';

.ruleForm {
	margin-top: 20px;

	.el-input {
		--el-input-border-radius: 0;

		:deep(.el-input__wrapper) {
			padding: 5px 0;
			box-shadow: 0 1px 0 0 #dcdfe6;
		}

		:deep(.el-input__wrapper.is-focus) {
			box-shadow: 0 1px 0 0 #409eff;

			.el-icon {
				color: #409eff;
			}
		}

		:deep(.el-input__wrapper:hover) {
			box-shadow: 0 1px 0 0 #409eff;
		}
	}

	.el-button {
		width: 80%;
		height: 40px;
		margin: 0 auto;
		border-radius: 30px;
	}
}

@for $i from 1 through 6 {
	.animation#{$i} {
		opacity: 0;
		animation-name: error-num;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		animation-delay: calc($i/10) + s;
	}
}
</style>
